jq(document).ready(function() {
    jq('#show-chart-popup, #chart-content').click(function(event) {
        var tmpl = "<div id='chart_content' style='max-height: 450px; overflow: auto;'> " +
            "<h2> 使用者人数集計 (グラフ統計)<\/h2> " +
            "<label>施設 </label>" +
            "<select id='popup-facility'>" +
            "<option value='all'>全施設</option>" +
            "<option value='all_gym'>体育館全て</option>" +
            "<option value='gym1'>第一体育館</option>" +
            "<option value='gym2'>第二体育館</option>" +
            "<option value='pool'>プール</option>" +
            "<option value='dock'>艇庫</option>" +
            "<select>" +
            "<button id='popup-csv' style='float: right'>ダウンロード</button>" +
            "<div id='popup-csv-data' style='display:none'></div>" +
            "<div id='chart_div' style='height: 400px; margin-top: 20px;'><\/div> " +
            "<br><br> " +
            "<div id='chart_table' style='text-align: center;'><\/div> " +
            "<br> " +
            "<a style='float: right;' href='#chart_content' >ページの先頭へ<\/a> " +
            "<\/div> ";
        jq.Zebra_Dialog(tmpl, {
            height: 800,
            width: 1000,
            title: '利用人数',
            type: '',
            buttons: [{
                caption: 'キャンセル',
                callback: function() {}
            }]
        });
        draw_chart();

        jq('#popup-facility').change(function() {
            draw_chart(jq('#popup-facility').val());
        });

        jq('#popup-csv').click(function() {
            window.location.href = 'index.php?top=page&option=com_frstatistic&task=export&csv_data=' + jq('#popup-csv-data').html();
        });
    });


    jq.ajax({
        dataType: "json",
        url: 'index.php?top=page&option=com_frstatistic&task=statistic_top',
        success: function(result) {
            var data = google.visualization.arrayToDataTable(rows2cols(result));

            var options = {
                vAxis: {
                    title: "利用人数"
                },
                seriesType: "bars",
                legend: 'top',
                isStacked: false
            };
            var chart = new google.visualization.ComboChart(document.getElementById('chart-content'));
            chart.draw(data, options);
        }
    });



});

function draw_chart(facility) {
    var fm = '';
    if (facility) {
        fm = '&facility=' + facility;
    }
    jq.ajax({
        dataType: "json",
        url: 'index.php?top=page&option=com_frstatistic&task=statistic_top' + fm,
        success: function(result) {
            gen_csv_data(result);
            var data = google.visualization.arrayToDataTable(rows2cols(result));

            var options = {
                vAxis: {
                    title: "利用人数"
                },
                seriesType: "bars",
                isStacked: false
            };
            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            chart.draw(data, options);
            var table_data = google.visualization.arrayToDataTable(result);
            var table = new google.visualization.Table(document.getElementById('chart_table'));
            table.draw(table_data, null);
        }
    });
}

function gen_csv_data(data) {
    var csv = [];
    var i = 0;
    jq(data).each(function(k, v) {
        var row = v.join(",");
        csv.push(row);
    });
    var csv = encodeURIComponent(csv.join("\r\n"));
    //csv = csv.join("\r\n");
    jq('#popup-csv-data').html(csv);
}

function rows2cols(a) {
    var r = [];
    var t;

    for (var i = 0, iLen = a.length; i < iLen; i++) {
        t = a[i];
        for (var j = 0, jLen = t.length; j < jLen; j++) {
            if (!r[j]) {
                r[j] = [];
            }
            r[j][i] = t[j];
        }
    }
    return r;
}
